/*
Blogger Template Style
Name     : DTE :]
Designer : Taufik Nurrohman
URL      : http://hompimpaalaihumgambreng.blogspot.com
*/

/* Animation */
@-webkit-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-moz-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-ms-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-o-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@keyframes myfirst {0%{opacity:0}100%{opacity:1}}

@-webkit-keyframes updown {0%{top:0}100%{top:-5px}}
@-moz-keyframes updown {0%{top:0}100%{top:-5px}}
@-ms-keyframes updown {0%{top:0}100%{top:-5px}}
@-o-keyframes updown {0%{top:0}100%{top:-5px}}
@keyframes updown {0%{top:0}100%{top:-5px}}

::selection {
  background-color:#0f666b;
  color:#333;
  text-shadow:none;
}

::-moz-selection {
  background-color:#0f666b;
  color:#333;
  text-shadow:none;
}

/* General */
.hidden {display:none}

.accessible-hidden {
  position:absolute;
  top:-9999px;
  left:-9999px;
}

body {
  background-color:#bbb;
  text-align:center;
  font:normal normal .8125em/1.5 Ubuntu,"Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  color:#333;
}

#out-shadow {
  position:relative;
  text-align:left;
  width:1250px;
  background-color:#ccc;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
  margin:23px auto 40px;
}

#out-shadow:after {
  content:"";
  display:table;
  clear:both;
}

/* Header */
#header-wrapper {
  background-color:#333;
  color:white;
  margin-bottom:1%;
  text-align:left;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
  padding:8px 0 18px;
}

#header {margin:0 15px}

#header h1 {
  font:normal 0/0 a;
  text-shadow:none;
  margin:0;
  padding:0;
}

#header a,
#header a:visited {color:white}

#header .description {
  font:normal normal 100%/1.5em Alike,Cambria,Georgia,Serif;
  color:#999;
  padding:5px 30px 0;
  margin:0 0;
}

#header-logo {
  position:relative;
  width:84px;
  height:35px;
  display:block;
  margin:10px 30px 5px;
}

#header-logo span,
#header-logo span:before,
#header-logo span:after {
  content:"";
  position:absolute;
  display:block;
}

#header-logo .char-d {
  width:auto;
  border:4px solid white;
  top:0;
  bottom:0;
  left:0;
}

#header-logo .char-d:before {
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}

#header-logo .char-t {
  width:0;
  top:0;
  bottom:0;
  left:15px;
  border-left:7px solid white;
}

#header-logo .char-t:before {
  width:18px;
  height:0;
  border-top:7px solid white;
  top:0;
  left:-12px;
}

#header-logo .char-e {
  border:7px solid white;
  border-radius:0 10px 0 0;
  border-left:none;
  top:0;
  right:35px;
  bottom:17px;
  left:30px;
  height:15px;
}

#header-logo .char-e:before {
  width:9px;
  height:28px;
  border-left:7px solid white;
  top:0;
  left:0;
}

#header-logo .char-symb {
  display:block;
  width:35px;
  height:35px;
  border:3px solid #5498C9;
  border-bottom-color:#5498C9;
  -webkit-border-radius:52px;
  -moz-border-radius:52px;
  border-radius:52px;
  bottom:0;
  left:57px;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -o-transform:rotate(-30deg);
  transform:rotate(-30deg);
}

#header-logo .char-symb:before {
  display:block;
  width:23px;
  height:23px;
  border:2px solid transparent;
  border-bottom-color:white;
  border-left-color:white;
  -webkit-border-radius:42px;
  -moz-border-radius:42px;
  border-radius:42px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  bottom:4px;
  left:4px;
}

#header-logo .char-symb:after {
  content:&quot;
  &quot;
  ;
  width:10px;
  height:10px;
  background-color:white;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  top:11px;
  left:4px;
}

#header-logo .char-symb span {
  content:&quot;
  &quot;
  ;
  width:10px;
  height:10px;
  background-color:white;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  top:11px;
  left:auto;
  right:4px;
}

#header-logo:hover .char-symb {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
  width:35px;
  height:35px;
  border-color:#ED1C24;
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}

#header-logo:hover .char-symb:after {
  background-color:#5498C9;
}

#header-logo:hover .char-symb:before {
  border-bottom-color:#5498C9;
  border-left-color:transparent;
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);
}

#header-logo:hover .char-symb span {
  background-color:#5498C9;
}

/* Main Nav */
#taufik {background-color:#333}

#taufik ul,
#taufik li {
  margin:0;
  padding:0;
  list-style:none;
  height:35px;
}

#taufik li {
  float:left;
  display:inline;
  position:relative;
  height:auto;
}

#taufik a {
  display:block;
  line-height:35px;
  border-left:1px solid #444;
  border-right:1px solid #222;
  color:#aaa;
  text-decoration:none;
  padding:0 1.8em;
}

#taufik li.depan a {border-left:none}

#taufik li ul {
  background-color:#333;
  border:0;
  position:absolute;
  top:100%;
  left:0;
  width:225px;
  height:auto;
  z-index:88;
  -webkit-box-shadow:0 1px 5px #222;
  -moz-box-shadow:0 1px 5px #222;
  box-shadow:0 1px 5px #222;
  display:none;
}

#taufik li li {
  float:none;
  display:block;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}

#taufik li ul a {
  height:33px;
  line-height:33px;
  padding:0 .8em 0 1.2em;
  font-size:96%;
}

#taufik li a:hover,
#taufik li:hover > a {color:#666}

#taufik li:hover ul.hidden {display:block}

/* Search Form */
#cse-search-box {
  position:absolute;
  top:15px;
  right:17px;
  z-index:10;
  vertical-align:top;
  text-align:right;
  width:165px;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

#cse-search-box #feed-q-input,
#subscribe-form input {
  background-color:#3d464f;
  width:145px;
  padding:1px;
  -webkit-box-shadow:inset 0 0 2px #333;
  -moz-box-shadow:inset 0 0 2px #333;
  box-shadow:inset 0 0 2px #333;
  border:1px solid;
  -webkit-transition:all .1s ease-out;
  -moz-transition:all .1s ease-out;
  -ms-transition:all .1s ease-out;
  -o-transition:all .1s ease-out;
  transition:all 1s ease-out;
  border-color:#222 #444 #444 #222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}

#cse-search-box #feed-q-input:focus {
  width:160px;
  color:white;
  background-color:#1a48ba;
  -webkit-box-shadow:0 0 2px white,0 0 30px white;
  -moz-box-shadow:0 0 2px white,0 0 30px white;
  box-shadow:0 0 2px white,0 0 30px white;
  border-color:white;
}
#search-result-container {
  width:437px;
  height:auto;
  max-height:630px;
  overflow:auto;
  position:absolute;
  position:fixed;
  top:17px;
  right:0;
  z-index:101;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#search-result-container mark {
  background-color:transparent;
  font-weight:bold;
  color:#225588;
}

#search-result-container a {
  text-decoration:none;
  color:#225588;
  font-size:13px;
  font-weight:normal;
  display:block;
  white-space:nowrap;
}

#search-result-container a:hover {
  text-decoration:underline;
  color:#052748;
}

#search-result-container h4 {
  border:1px solid #B7C1CE;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  padding:2px;
  margin:0 0 10px;
  font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:#B50001;
}

#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0 0;
}

#search-result-container li {
  margin:0 0 5px;
  padding:7px 8px;
  list-style:none;
  color:#222;
  font-size:86%;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px 2px;
}

#search-result-loader {
  display:block;
  position:absolute;
  top:30px;
  left:0;
  margin-bottom:2em;
  font-size:11px;
  font-weight:bold;
  color:white;
  text-align:center;
  width:147px;
  white-space:nowrap;
  line-height:normal;
  padding:.6em 1em;
  background-color:#ff8000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  visibility:hidden;
  z-index:999;
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out;
  display:none;
}

#search-result-loader:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  position:absolute;
  bottom:100%;
  left:2em;
  border-bottom-color:#ff8000;
}

.closed-box {
  position:absolute;
  top:11px;
  right:15px;
  line-height:22px;
  text-decoration:none;
  color:white;
  font:bold 16px Arial,Sans-Serif;
}

#cse-search-box label {
  display:block;
  position:absolute;
  top:30px;
  left:0;
  margin-bottom:2em;
  font-size:11px;
  font-weight:bold;
  color:white;
  white-space:nowrap;
  line-height:normal;
  padding:.6em 1em;
  background-color:#ff8000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

#cse-search-box label:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  position:absolute;
  bottom:100%;
  left:2em;
  border-bottom-color:#ff8000;
}

#cse-search-box input:focus + label,
#search-result-loader {
  visibility:visible;
  opacity:1;
  margin-bottom:-.5em;
  -webkit-transition:all .1s ease-out;
  -moz-transition:all .1s ease-out;
  -ms-transition:all .1s ease-out;
  -o-transition:all .1s ease-out;
  transition:all 1s ease-out;
}
/* Main Column */
#main-wrapper {
  margin:0 0 0 1%;
  width:67%;
  float:left;
  display:inline;
  word-wrap:break-word;
  overflow:hidden;
  background-color:white;
  background-image:-webkit-linear-gradient(top,#dedede,white 100px);
  background-image:-moz-linear-gradient(top,#dedede,white 100px);
  background-image:-ms-linear-gradient(top,#dedede,white 100px);
  background-image:-o-linear-gradient(top,#dedede,white 100px);
  background-image:linear-gradient(top,#dedede,white 100px);
  border:2px solid #888;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  padding:10px 0;
}

/* Sidebar */
.sidebar ul {
  list-style:none;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  margin:0 0 1.25em;
  padding:0;
}

.sidebar ul li {
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  margin:0;
  padding:3px 10px;
}

.sidebar p {margin:0 0 .6em}

#sidebar-wrapper {
  margin:0 1% 10px 0;
  width:28.8%;
  float:right;
  text-align:left;
  background-color:#333;
  font-size:99%;
  border:4px solid #ddd;
  color:#666;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
  display:inline;
  word-wrap:break-word;
  overflow:hidden;
  position:relative;
  right:-2px;
  padding:0;
}

#sidebar-wrapper .widget {
  font-size:97%;
  margin:0;
}

#sidebar-wrapper .widget-content {
  margin:0;
  padding:10px;
}

#sidebar-wrapper h2 {
  cursor:pointer;
  text-shadow:0 1px 0 black;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,#333,#3c3c3c);
  background-image:-moz-linear-gradient(top,#333,#3c3c3c);
  background-image:-ms-linear-gradient(top,#333,#3c3c3c);
  background-image:-o-linear-gradient(top,#333,#3c3c3c);
  background-image:linear-gradient(top,#333,#3c3c3c);
  border:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  font:normal bold 100%/28px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  color:#bbb;
  text-transform:uppercase;
  height:28px;
  padding:0 .8em;
  margin:0;
}

#sidebar-wrapper h2.active {
  background-image:-webkit-linear-gradient(top,#3c3c3c,#333);
  background-image:-moz-linear-gradient(top,#3c3c3c,#333);
  background-image:-ms-linear-gradient(top,#3c3c3c,#333);
  background-image:-o-linear-gradient(top,#3c3c3c,#333);
  background-image:linear-gradient(top,#3c3c3c,#333);
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  border-color:#555 transparent #222;
}

#sidebar-wrapper a {
  color:#999;
  text-decoration:none;
  text-shadow:0 1px 0 black;
}

#sidebar-wrapper a:visited {color:#555}

#sidebar-wrapper a:hover,
#sidebar-wrapper a:visited:hover {
  color:white;
  text-decoration:none;
}

#loadingtext {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}

#loadingtext span {
  display:inline;
  background-color:#900;
  padding:5px 10px 7px;
  font:bold 11px/24px Arial,Sans-Serif;
  color:white;
}

#loadingtext iframe {
  position:absolute;
  top:0;
  left:50%;
  margin-left:-33px !important;
}

#alert-box {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}

#alert-box .message {
  background-color:#174A87;
  border:10px solid #0A2E58;
  padding:20px;
  -webkit-box-shadow:0 0 2px 1px black,0 0 10px black;
  -moz-box-shadow:0 0 2px 1px black,0 0 10px black;
  box-shadow:0 0 2px 1px black,0 0 10px black;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  color:white;
  width:370px;
  margin:0 auto;
  text-align:left;
}

#alert-box .button-group {
  margin:15px auto 0;
  text-align:center;
}

#alert-box button {
  border:none !important;
  margin:0 2px;
  padding:5px 10px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

iframe,
.netral,
.emo {
  border:none;
  background:transparent;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  padding:0;
}

.jsfiddle-demo {
  display:block;
  width:99%;
  height:300px;
  border:2px solid #4474A5;
  margin:0 auto;
}

/* Footer */
#main-footer {
  font-family:Alike,Cambria,Georgia,Serif;
  color:#999;
  background-color:#333;
  margin-top:1%;
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
  padding:15px 15px 8px;
}

#main-footer a:link,
#main-footer a:visited {color:white}

#main-footer .blog-dir {
  opacity:0;
  overflow:hidden;
  -webkit-transition:opacity .4s ease-out;
  -moz-transition:opacity .4s ease-out;
  -ms-transition:opacity .4s ease-out;
  -o-transition:opacity .4s ease-out;
  transition:opacity .4s ease-out;
}

#main-footer:hover .blog-dir {opacity:1}
#main-footer .copyright {overflow:hidden}

/* In loading... */
#main-wrapper {
  -webkit-animation:myfirst 1s;
  -moz-animation:myfirst 1s;
  -ms-animation:myfirst 1s;
  -o-animation:myfirst 1s;
  animation:myfirst 1s;
}

h2,h3,#sidebar-wrapper,#ad-wrapper {
  -webkit-animation:myfirst 2s;
  -moz-animation:myfirst 2s;
  -ms-animation:myfirst 2s;
  -o-animation:myfirst 2s;
  animation:myfirst 2s;
}

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#010101;
  z-index:9999;
  text-align:center;
  padding:70px 0 0;
  display:none;
}

/* Contact Frame */
#contact-frame {
  width:560px;
  height:360px;
  border:none;
  background-color:#333;
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  overflow:hidden;
  position:absolute;
  top:100px;
  left:50%;
  z-index:9999;
  margin:0 0 0 -280px;
}

#contact-close {
  position:absolute;
  line-height:normal;
  top:105px;
  left:50%;
  margin:0 0 0 -268px;
  border:none;
  z-index:99999;
  text-decoration:none;
  font-weight:bold;
  font-size:150%;
  color:white;
}

/* Status Panel */
#status {
  position:absolute;
  top:54px;
  left:-4px;
  z-index:8;
  cursor:help;
  background-color:#DC4236;
  font-size:96%;
  color:white;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  text-align:right;
  padding:7px 12px 7px 10px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:0 5px 5px 0;
  -moz-border-radius:0 5px 5px 0;
  border-radius:0 5px 5px 0;
  -webkit-transition:top .5s ease-in-out;
  -moz-transition:top .5s ease-in-out;
  -ms-transition:top .5s ease-in-out;
  -o-transition:top .5s ease-in-out;
  transition:top .5s ease-in-out;
  overflow:hidden;
  display:none;
}

#status a {color:#ffa}

#status strong {
  cursor:pointer;
  float:right;
  width:16px;
  height:16px;
  font-size:78%;
  line-height:16px;
  text-align:center;
  background-color:#8B271F;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  border-radius:12px;
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}

#status h2 {
  font-size:110%;
  color:inherit;
  background-image:-webkit-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  margin:0 0 10px;
  padding:5px 10px;
}

#status .section {
  position:relative;
  top:-12px;
  left:-10px;
  margin:0 10px 0;
  padding:0 0;
  width:300px;
  height:300px;
  text-align:left;
  display:none;
}

#status .widget,
#status .widget-content {
  width:auto;
  margin:0 0;
  padding:0 0;
}

#status:hover strong {
  -webkit-transform:rotate(-720deg);
  -moz-transform:rotate(-720deg);
  -ms-transform:rotate(-720deg);
  -o-transform:rotate(-720deg);
  transform:rotate(-720deg);
}

/* 'Top' Link */
#gotop {
  cursor:pointer;
  position:fixed !important;
  position:absolute;
  bottom:-40px;
  right:-40px;
  z-index:999;
  width:30px;
  height:30px;
  background-color:#067BAF;
  border:1px solid #144F69;
  overflow:hidden;
  background-image:-webkit-radial-gradient(top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(top,#2493C4,#086A95);
  background-image:-o-radial-gradient(top,#2493C4,#086A95);
  background-image:radial-gradient(top,#2493C4,#086A95);
  -webkit-border-radius:10px 0 0 0;
  -moz-border-radius:10px 0 0 0;
  border-radius:10px 0 0 0;
  text-indent:-9999px;
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
}

#gotop:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border-width:10px 4px;
  border-style:solid;
  border-color:transparent transparent #C3D1D7 transparent;
  position:absolute;
  top:0;
  left:11px;
}

#gotop:focus {outline:none}
#gotop:hover:after {border-bottom-color:white}

#gotop:active {
  background-image:-webkit-linear-gradient(top,#144F69,#2493C4);
  background-image:-moz-linear-gradient(top,#144F69,#2493C4);
  background-image:-ms-linear-gradient(top,#144F69,#2493C4);
  background-image:-o-linear-gradient(top,#144F69,#2493C4);
  background-image:linear-gradient(top,#144F69,#2493C4);
}

/* Tooltip search */
.tt-search {
  display:none;
  border:1px solid black;
  background-color:white;
  padding:5px 7px;
  position:absolute;
  z-index:99999;
  text-align:left;
  margin:30px 0 0 50px;
}

.tt-search .anchor {
  font-size:90%;
  font-family:Arial,Sans-Serif;
  line-height:normal;
  display:block;
  color:#4A87B8;
  cursor:pointer;
}

.tt-search .anchor:hover {text-decoration:underline}

/* Media Queries */
@media (max-width:1250px) {
    #out-shadow {width:100%}
}

@media (max-width:1024px) {
    #out-shadow {
      width:auto;
      margin-left:.5%;
      margin-right:.5%;
    }
    #top-ribbon {right:24%}
}

@media (max-width:860px) {
    body {
      -webkit-animation:myfirst .5s;
      -moz-animation:myfirst .5s;
      -ms-animation:myfirst .5s;
      -o-animation:myfirst .5s;
      animation:myfirst .5s;
      overflow-x:hidden !important;
    }
    #main-wrapper,
    #about .col.float-left,
    #about .col.float-right {
      float:none;
      display:block;
      width:auto;
      height:auto;
      margin:0 1% 1.5em;
    }
    #sidebar-wrapper,
    #ad-wrapper {margin:0 1% 1%}
    #sidebar-wrapper {
      float:left;
      display:inline;
      width:46%;
      height:auto;
      right:0;
    }
    #ad-wrapper {
      float:none;
      display:block;
      width:auto;
      margin:2% 1.5%;
      padding:5px;
    }
    #ad-1 {margin:0}
    .sidebar-box {
      display:inline;
      float:right;
      width:48%;
      margin:0 1% 10px 0;
      border:4px solid #ddd;
    }
    .breadcrumb .kanan {display:none}
    #top-ribbon {right:-140px}
    #header-wrapper h1 {
      display:block;
      font-size:25px;
    }
    #ad-banner-wrapper {
      text-align:center;
      margin:0 0;
    }
    img.ad-banner {
      margin:0 0;
      width:auto;
      max-width:92.88%;
    }
    .addthis_toolbox {
      clear:both;
      width:96%;
      height:24px;
      margin:7px 2% 5px;
    }
    .addthis_toolbox a.subscribe {
      float:right;
      clear:right;
      top:0;
      padding:3px 7px;
      line-height:normal;
    }
    #subscribe-form {width:190px}
    #subscribe-form input.email-input {width:150px}
}

@media (max-width:580px) {
    html {-webkit-text-size-adjust:none}
    #out-shadow {
      width:auto;
      margin:0 0 40px 0;
    }
    #header-wrapper {
      min-height:20px;
      height:auto !important;
      height:20px;
    }
    #status {
      position:fixed !important;
      position:absolute;
      top:4px;
      z-index:1200;
    }
    #cse-search-box {
      position:fixed !important;
      position:absolute;
      height:auto;
      background-color:#333;
      width:auto;
      top:0;
      right:0;
      left:0;
      z-index:1000;
      padding:9px 3% 10px;
      border-bottom:2px solid #aaa;
      -webkit-box-shadow:0 0 5px black;
      -moz-box-shadow:0 0 5px black;
      box-shadow:0 0 5px black;
    }
    input.search-field {margin:0}
    .post-outer {
      display:block;
      float:none;
      width:auto;
    }
    .post {
      -webkit-box-shadow:none;
      -moz-box-shadow:none;
      box-shadow:none;
    }
    #top-ribbon {margin-top:42px}
    #taufik li,
    #sidebar-wrapper,
    #ad-wrapper,
    .sidebar-box,
    #ad-bottom .container.float-left,
    #ad-bottom .container.float-right {
      float:none;
      display:block;
      width:auto;
    }
    #ad-bottom .container.float-left,
    #ad-bottom .container.float-right {
      padding:4%;
      margin:0;
    }
    #ad-bottom .container.float-left {margin-bottom:1em}
    #taufik,
    #taufik ul {height:auto}
    #taufik {padding-bottom:2px}
    .ad-banner-5 {display:none}
    #taufik li {
      border-top:1px solid #444;
      border-bottom:1px solid #222;
      padding:0;
    }
    #taufik li a {
      padding:0 1.2em;
      border:none;
    }
    #taufik > ul > li.drop-down:after {
      content:"+";
      font:normal bold 20px/31px Verdana,Tahoma,Arial,Sans-Serif;
      color:#666;
      display:block;
      position:absolute;
      top:0;
      right:.7em;
      letter-spacing:-3px;
    }
    #taufik > ul > li.drop-down.active:after {content:"--"}
    #taufik li ul {
      position:static;
      width:auto;
    }
    #taufik li ul li,
    #taufik li ul li a {border:none}
    #taufik li ul li a {
      border-top:1px solid #3c3c3c;
      background-color:#222;
    }
    #taufik li ul li a:active {
      background-color:white;
      color:inherit;
    }
    .sidebar-box {margin:10px 1% 0}
    .alignleft,
    .alignright,
    .align-left,
    .align-right {
      float:none;
      display:block;
      margin:0 0 1.7em;
      text-align:center;
    }
    .post-body img,
    #comments iframe.video {max-width:90%}
    #taufik li .float-right,
    #header-wrapper h1,
    #header-wrapper .description,
    #header-logo,
    .breadcrumb,
    .reaction-button,
    .post-body ins#aswift_0_anchor,
    .inline-ad .snippet-outer {display:none}
    .item .addthis_toolbox {
      background-color:#eee;
      border-top:1px dotted #bbb;
      padding:12px 10px 4px;
      margin:5px auto 0;
    }
    img.ad-banner {width:90%}
    .static_page #taufik {border-bottom:none}
    .cm_head {
      width:auto;
      height:50px;
      margin:0 55px 0 0;
      position:relative;
    }
    .cm_head a.answer-this-comment,
    .cm_head a.comment-delete {
      float:left;
      margin:0 0 10px 10px;
      padding:.7em 1em;
      font:inherit;
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
      border-radius:2px;
    }
    .cm_head .avatar-image-container {
      position:absolute;
      top:-10px;
      left:100%;
    }
    .cm_entry {margin:0 0 30px 0}
    #comment-form {margin-top:0}
    .cm_wrap #comment-form {margin-bottom:30px}
    #respond a.button {
      display:block;
      margin:0 0 4px;
      padding:.7em 1.2em;
    }
    #status-forum li {
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
}

.clear {clear:both}

